@use '../../../../../../node_modules/@tweakpane/core/lib/sass/tp';

.#{tp.$prefix}-rotv {
	@extend %tp-theming;

	background-color: tp.cssVar('base-bg');
	border-radius: tp.cssVar('base-border-radius');
	box-shadow: 0 2px 4px tp.cssVar('base-shadow');
	font-family: tp.cssVar('base-font');
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	text-align: left;

	&_b {
		@extend %tp-folder_title;

		border-bottom-left-radius: tp.cssVar('base-border-radius');
		border-bottom-right-radius: tp.cssVar('base-border-radius');
		border-top-left-radius: tp.cssVar('base-border-radius');
		border-top-right-radius: tp.cssVar('base-border-radius');
		padding-left: calc(
			2px * 2 + #{tp.cssVar('container-unit-size')} + #{tp.cssVar(
					'container-h-padding'
				)}
		);
		text-align: center;
	}
	&#{&}-expanded &_b {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		transition-delay: 0s;
		transition-duration: 0s;
	}
	&#{&}-not > &_b {
		// no title
		display: none;
	}
	&_m {
		@extend %tp-folder_mark;
	}
	&_b:disabled &_m {
		display: none;
	}
	&#{&}-expanded &_m {
		@extend %tp-folder_mark-expanded;
	}
	&_c {
		@extend %tp-folder_container;
		@extend %tp-container_children;
	}
	&#{&}-expanded &_c {
		@extend %tp-folder_container-expanded;
	}
	&#{&}-cpl:not(#{&}-expanded) &_c {
		@extend %tp-folder_container-shrinkedCompletely;
	}

	// Folders
	&_c {
		// Bottom of the last folder container
		& > .#{tp.$prefix}-fldv.#{tp.$last} > .#{tp.$prefix}-fldv_c {
			border-bottom-left-radius: tp.cssVar('base-border-radius');
			border-bottom-right-radius: tp.cssVar('base-border-radius');
		}
		// Bottom of the last folder indent
		& > .#{tp.$prefix}-fldv.#{tp.$last} > .#{tp.$prefix}-fldv_i {
			border-bottom-left-radius: tp.cssVar('base-border-radius');
		}
		// Bottom of the last folder title when collapsed
		&
			> .#{tp.$prefix}-fldv.#{tp.$last}:not(.#{tp.$prefix}-fldv-expanded)
			> .#{tp.$prefix}-fldv_b {
			border-bottom-left-radius: tp.cssVar('base-border-radius');
			border-bottom-right-radius: tp.cssVar('base-border-radius');
		}
		// Bottom of the last folder title when expanded
		&
			> .#{tp.$prefix}-fldv.#{tp.$last}.#{tp.$prefix}-fldv-expanded
			> .#{tp.$prefix}-fldv_b {
			transition-delay: 0s;
			transition-duration: 0s;
		}
		// Bottom of the last subfolder title when collapsed
		&
			.#{tp.$prefix}-fldv.#{tp.$very-last}:not(.#{tp.$prefix}-fldv-expanded)
			> .#{tp.$prefix}-fldv_b {
			border-bottom-right-radius: tp.cssVar('base-border-radius');
		}
	}
	&#{&}-not &_c {
		// First folder without pane title
		& > .#{tp.$prefix}-fldv.#{tp.$first} {
			margin-top: calc(-1 * #{tp.cssVar('container-v-padding')});

			& > .#{tp.$prefix}-fldv_b {
				border-top-left-radius: tp.cssVar('base-border-radius');
				border-top-right-radius: tp.cssVar('base-border-radius');
			}
		}
	}

	// Tabs
	&_c {
		// Bottom of the last tab container
		& > .#{tp.$prefix}-tabv.#{tp.$last} > .#{tp.$prefix}-tabv_c {
			border-bottom-left-radius: tp.cssVar('base-border-radius');
			border-bottom-right-radius: tp.cssVar('base-border-radius');
		}
		// Bottom of the last tab indent
		& > .#{tp.$prefix}-tabv.#{tp.$last} > .#{tp.$prefix}-tabv_i {
			border-bottom-left-radius: tp.cssVar('base-border-radius');
		}
	}
	&#{&}-not &_c {
		// First tab without pane title
		& > .#{tp.$prefix}-tabv.#{tp.$first} {
			margin-top: calc(-1 * #{tp.cssVar('container-v-padding')});

			& > .#{tp.$prefix}-tabv_t {
				border-top-left-radius: tp.cssVar('base-border-radius');
				border-top-right-radius: tp.cssVar('base-border-radius');
			}
		}
	}

	&.#{tp.$disabled},
	.#{tp.$disabled} {
		pointer-events: none;
	}
	&.#{tp.$hidden},
	.#{tp.$hidden} {
		display: none;
	}
}
